{% extends 'teacher/base.html' %}
{% load staticfiles %}
{% block content %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Syllabus
                    <small></small>
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-suitcase"></i>  <a href="/teaching">Teaching</a>
                    </li>
                    <li>
                        <i class="fa fa-compass"></i> {{ course.title }}
                    </li>
                    <li class="active">
                        <i class="fa fa-info"></i> Syllabus
                    </li>
                </ol>

            </div>
        </div>
        <!-- /.row -->

        {% if syllabus == None %}
        <!-- Banner -->
        <div class="jumbotron">
            <h1>Upload Syllabus</h1>
            <p>A syllabus is required to run a course. Please update.</p>
            <p><button onclick="ajax_syllabus_modal();"
                            id="add_syllabus_btn"
                          name="add_syllabus_btn"
                         class="btn btn-primary btn-lg"
                          role="button">Upload »</button>
            </p>
        </div>
        <!-- /.row -->
        {% else %}
        <!-- PDF RESULT -->
        <div class="row">
            <div class="col-lg-12">
                <button onclick="ajax_delete_syllabus({{ syllabus.syllabus_id }});"
                             id="del_{{ syllabus.syllabus_id }}_btn"
                           name="del_{{ syllabus.syllabus_id }}_btn"
                          class="btn btn-danger btn-lg"
                           role="button">Delete</button>
                <iframe id="pdf_response" src="{{ syllabus.file.url }}" width="100%" height="640px"></iframe>
            </div>
        </div>
        <!-- /.row -->
        {% endif %}

<!-- Modal -->
<div id="ajax_syllabus_modal"
   name="ajax_syllabus_modal"></div>
<!-- end modal -->

<script>
    /**
     *  Function will call AJAX function to load the modal for the new course
     *  creation UI.
     */
    function ajax_syllabus_modal()
    {
        $('#add_syllabus_btn').prop("disabled", true); // Lock button
        $.ajax( 'syllabus_modal', {
           data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
           },
           type: 'post',
           success: function(result) {
               // success code execution here
               $('#ajax_syllabus_modal').html(result); // Update UI.
               $('#syllabus_modal').modal();           // Unhide view.
           },
           error: function(xhr,status,error) {
               // error code here
           },
           complete: function(xhr,status) {
               // completion code here
           }
        });
    }

    /**
     *  Function will call AJAX function to delete the teacher's syllabus.
     */
    function ajax_delete_syllabus(syllabus_id)
    {
        $('#del_'+syllabus_id+'_btn').prop("disabled", true); // Lock button
        $.ajax( 'delete_syllabus', {
               data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'syllabus_id' : syllabus_id
               },
               type: 'post',
               success: function(result) {
                    // success code execution here
                    if (result.status == 'success')
                    {
                        $('#del_'+syllabus_id+'_btn').prop("disabled", false); // Unlock button
                        refresh_page();
                    }
               },
               error: function(xhr,status,error) {
                    // error code here
               },
               complete: function(xhr,status) {
                    // completion code here
               }
        });
    }

    /**
     *  Function makes the current tab refresh the page.
     */
    function refresh_page()
    {
        window.location = '{{ tab }}';
    }
    </script>


{% endblock content %}
